/** @format */

import { IErrorEvent } from '@/types/collection/error'
import { Button, DatePicker, Form, FormProps, Input, Space } from 'antd'
import locale from 'antd/es/date-picker/locale/zh_CN'

interface Props {
  onSubmit: (values: IErrorEvent) => void
}
const { RangePicker } = DatePicker
const ErrorFilterForm: React.FC<Props> = ({ onSubmit }) => {
  const [form] = Form.useForm()

  const onFinish: FormProps<IErrorEvent>['onFinish'] = (values) => {
    onSubmit(values)
  }

  return (
    <Form className="mb-2" layout="inline" form={form} name="error-filter" onFinish={onFinish}>
      <Form.Item<IErrorEvent> name="errMessage" label="错误信息:">
        <Input placeholder="错误信息" />
      </Form.Item>
      <Form.Item<IErrorEvent> name="sendTime" label="时间范围:">
        <RangePicker showTime locale={locale} />
      </Form.Item>
      <div className="flex ">
        <Space size="small">
          <Button type="primary" htmlType="submit">
            查询
          </Button>
          <Button
            onClick={() => {
              form.resetFields()
            }}>
            重置
          </Button>
        </Space>
      </div>
    </Form>
  )
}

export default ErrorFilterForm
